<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>弹出DIV</title>  
    <style>  
       /* body {  
            font-family: Arial, Helvetica, sans-serif;  
            font-size: 12px;  
            margin: 0;  
        }  */
        #main {  
            height: 1800px;  
            padding-top: 90px;  
            text-align: center;  
        }  
        #fullbg {  
            background-color: gray;  
            left: 0;  
            opacity: 0.5;  
            position: absolute;  
            top: 0;  
            z-index: 3;  
            filter: alpha(opacity=50);  
            -moz-opacity: 0.5;  
            -khtml-opacity: 0.5;  
        }  
  
        #dialog {  
            background-color: #fff;  
            border: 5px solid rgba(0,0,0, 0.4);  
            height: 400px;  
            left: 50%;  
            margin: -200px 0 0 -200px;  
            padding: 1px;  
            position: fixed !important; /* 浮动对话框 */  
            position: absolute;  
            top: 50%;  
            width: 400px;  
            z-index: 5;  
            border-radius: 5px;  
            display: none;  
        }  
        #dialog p {  
                margin: 0 0 12px;  
                height: 24px;  
                line-height: 24px;  
                background: #CCCCCC;  
         }  
         #dialog p.close {  
                text-align: right;  
                padding-right: 10px;  
         }  
        #dialog p.close a {  
                color: #fff;  
                text-decoration: none;  
        }  
    </style>  
    <script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
    <script type="text/javascript">  
        //显示灰色 jQuery 遮罩层   
        function showBg() {  
            var bh = $("body").height();  
            var bw = $("body").width();  
            $("#fullbg").css({  
                height: bh,  
                width: bw,  
                display: "block"  
            });  
            $("#dialog").show();  
        }  
        //关闭灰色 jQuery 遮罩   
        function closeBg() {  
            $("#fullbg,#dialog").hide();  
        }  
    </script>  
</head>  
<body>  
    <form>  
        <div id="main">  
            <a href="javascript:showBg();">点击这里查看效果</a>  
            <div id="fullbg"></div>  
            <div id="dialog">  
                <p class="close">  
                    <a href="#" onclick="closeBg();">关闭</a></p>  
                    <div>正在加载，请稍后....</div>  
            </div>  
        </div>  
    </form>  
</body>  
</html>  